<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!-- import CSS -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <title>添加宠物</title>
</head>
<body>
<div id="app">
    <el-page-header style="background-color:#0095d7;color: white;line-height: 60px " @back="goBack" content="添加商品">
    </el-page-header>
    <el-divider></el-divider>
    <el-card>
        <el-form style="width: 400px;margin: 30px auto" label-width="80px" :model="p" :rules="rules" ref="ruleForm">
            <el-form-item label="宠物名" prop="goodsName">
                <el-input type="text" placeholder="请输入宠物名" v-model="p.goodsName"></el-input>
            </el-form-item>
            <el-form-item label="简介" prop="description">
                <el-input type="text" placeholder="请输入简介" v-model="p.description"></el-input>
            </el-form-item>
            <el-form-item label="价格" prop="listPrice">
                <el-input type="text" placeholder="请输入宠物售价" v-model="p.listPrice"></el-input>
            </el-form-item>
            <el-form-item label="类别">
                <template>
                    <el-select v-model="p.categoryId" clearable placeholder="请选择类别">
                        <el-option
                                v-for="item in categoryArr"
                                :key="item.id"
                                :label="item.name"
                                :value="item.id">
                        </el-option>
                    </el-select>
                </template>
            </el-form-item>

            <el-form-item label="关键词">
                <el-tag
                        :key="tag"
                        size="medium"
                        v-for="tag in dynamicTags"
                        closable
                        :disable-transitions="false"
                        @close="handleClose(tag)">
                    {{tag}}
                </el-tag>
                <el-input
                        class="input-new-tag"
                        v-if="inputVisible"
                        v-model="inputValue"
                        ref="saveTagInput"
                        size="small"
                        @keyup.enter.native="handleInputConfirm"
                        @blur="handleInputConfirm"
                >
                </el-input>
                <el-button v-else class="button-new-tag" size="small" @click="showInput">点击添加关键词</el-button>
            </el-form-item>

            <el-form-item label="标签">
                <el-tag
                        :key="tag"
                        size="medium"
                        v-for="tag in dynamicTags1"
                        closable
                        :disable-transitions="false"
                        @close="handleClose1(tag)">
                    {{tag}}
                </el-tag>
                <el-input
                        class="input-new-tag"
                        v-if="inputVisible1"
                        v-model="inputValue1"
                        ref="saveTagInput"
                        size="small"
                        @keyup.enter.native="handleInputConfirm1"
                        @blur="handleInputConfirm1"
                >
                </el-input>
                <el-button v-else class="button-new-tag" size="small" @click="showInput1">点击添加标签</el-button>
            </el-form-item>


            <el-form-item label="宠物图片">
                <el-upload
                        action="/upload"
                        :limit="1"
                        name="picFile"
                        list-type="picture-card"
                        :on-preview="handlePictureCardPreview"
                        :on-remove="handleRemove"
                        :on-success="handleSuccess"
                >
                    <i class="el-icon-plus"></i>
                </el-upload>
                <el-dialog :visible.sync="dialogVisible">
                    <img width="100%" :src="dialogImageUrl" alt="">
                </el-dialog>
            </el-form-item>
            <el-form-item>
                <el-button @click="insert(p)">发布商品</el-button>
            </el-form-item>
        </el-form>


    </el-card>
</div>
</body>
<!-- import Vue before Element -->
<script src="https://unpkg.com/vue@2.6.14/dist/vue.min.js"></script>
<!-- import JavaScript -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<!-- axios -->
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>

<style>
    .el-tag + .el-tag {
        margin-left: 10px;
    }
    .button-new-tag {
        margin-left: 10px;
        height: 32px;
        line-height: 30px;
        padding-top: 0;
        padding-bottom: 0;
    }
    .input-new-tag {
        width: 90px;
        margin-left: 10px;
        vertical-align: bottom;
    }
</style>

<script>
   let v = new Vue({
        el: '#app',
        data: function() {
            return {
                dialogImageUrl: '',
                dialogVisible: false,
                categoryArr:[],
                p:{
                    goodsName:"",
                    description:"",
                    listPrice:"",
                    stock: 1,
                    categoryId: "",
                    categoryName: "",
                    albumId: "",
                    pictures:"",
                    keywords: "",
                    tags: "",
                    sort: "1",
                    isPublished: "",
                    isNewArrival: "1"
                },
                rules: {
                    goodsName: [
                        { required: true, message: '请输入宠物名称', trigger: 'blur' },
                        { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
                    ],
                    description: [
                        { required: true, message: '请输入简介', trigger: 'blur' },
                        { min: 1, max: 10, message: '长度在 1 到 10 个字符', trigger: 'blur' }
                    ],
                    listPrice: [
                        { required: true, message: '请输入售价', trigger: 'blur' },
                        { type: "number", message: '价格必须为数字', trigger: 'blur' }
                    ],
                },
                dynamicTags: [],
                inputVisible: false,
                inputValue: '',
                dynamicTags1: [],
                inputVisible1: false,
                inputValue1: ''
            }
        },
       methods:{
           goBack() {
               //返回上一页面
               history.back();
           },
           handleRemove(file, fileList) {
               console.log(file, fileList);
               let filename = file.response;
               axios.get("/remove?filename="+filename).then(function (response){
                   console.log("删除完成！")
               })
           },
           handlePictureCardPreview(file) {
               this.dialogImageUrl = file.url;
               this.dialogVisible = true;
           },
           insert(object){
               if (v.p.goodsName=="" || v.p.description==""||v.p.listPrice==""|| v.p.categoryId=="") {
                   v.$message.error("请输入必要的信息");
                   return;
               }
               if(v.p.url==""){
                   v.$message.error("请选择上传的图片！")
                   return;
               }
               for (let i = 0; i < v.categoryArr.length; i++) {
                   if (v.categoryArr[i].id == v.p.categoryId){
                       v.p.categoryName = v.categoryArr[i].name;
                   }
               }
               v.p.keywords =v.dynamicTags.join(",");
               v.p.tags =v.dynamicTags1.join(",");
               let url = "http://localhost:8847"
               axios.create({
                   headers:{
                       'Authorization' : localStorage.getItem("jwt")
                   }
               }).post(url+"/pets/add-new",v.p).then(function (response){
                   if (response.data.code == 200) {
                       v.$message({
                           message: "添加宠物成功,等待工作人员审核后上架",
                           type: 'success'
                       })
                   }
                   location.href="/admin.html";
               })
           },
           handleSuccess(response, file, fileList){
               console.log("上传文件成功！");
               console.log("response="+response);
               console.log("file="+file);
               v.p.url = response;
           },
           getCategorylist: function (){
               let url = "http://localhost:8847/category/childrenList?id=1"
               axios.create({
                   headers:{
                       'Authorization' : localStorage.getItem("jwt")
                   }
               }).get(url).then(function (response) {
                   v.categoryArr = response.data.data
               })
           },
           handleClose(tag) {
               this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1);
           },

           showInput() {
               this.inputVisible = true;
               this.$nextTick(_ => {
                   this.$refs.saveTagInput.$refs.input.focus();
               });
           },

           handleInputConfirm() {
               let inputValue = this.inputValue;
               if (inputValue) {
                   this.dynamicTags.push(inputValue);
               }
               this.inputVisible = false;
               this.inputValue = '';
           },
           handleClose1(tag) {
               this.dynamicTags1.splice(this.dynamicTags1.indexOf(tag), 1);
           },

           showInput1() {
               this.inputVisible1 = true;
               this.$nextTick(_ => {
                   this.$refs.saveTagInput.$refs.input.focus();
               });
           },

           handleInputConfirm1() {
               let inputValue1 = this.inputValue1;
               if (inputValue1) {
                   this.dynamicTags1.push(inputValue1);
               }
               this.inputVisible1 = false;
               this.inputValue1 = '';
           },
           resetForm(formName) {
               this.$refs[formName].resetFields();
           }
       },
       mounted: function (){
           this.$nextTick(function () {
               this.getCategorylist();
           })
       }
    })
</script>
</html>